<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space20">
                <form class="layui-form" lay-filter="myform" id="myform">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" id="name" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <input type="reset" id="btReset" class="layui-hide" >
                                <button type="button" class="layui-btn " data-type="query"><i class="layui-icon">&#xe615;</i>查询</button>
                                <button type="button" class="layui-btn " data-type="resetPric"><i class="layui-icon">&#xe669;</i>重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-row layui-col-space20">
            <div style="float: left;width:50%">
                <table class="layui-hide"  id="main-table" lay-filter="main-table"></table>
            </div>
            <div style="float: left;width:47%">
                <table class="layui-hide"  id="sub-table" lay-filter="sub-table"></table>
            </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="none">
    layui.use(['table','form'], function(){
        var table = layui.table,
            form = layui.form;
        table.render({
            elem: '#main-table'
            ,height: top.height-110
            ,url: 'role/getPageList' 
            ,limit:17
            ,page: true
           // ,toolbar: '#toolbar' 
            ,cols: [
                [ 
                {type: 'radio'}
                ,{type: 'numbers'}
                ,{field: 'id', title: 'ID',hide:true}
                ,{field: 'name', width: 300, title: '角色名称'}
      	      ,{field: 'code', width: 170, title: '角色编码'}
      	      ,{field: 'orgName', width: 150, title: '所属公司'}
            ]
            ]
            ,done:function(){
             }
        });
        table.render({
            elem: '#sub-table'
            ,height: 609
            ,url: 'user/getPageList' 
            ,where: {roleCode: "#"}
            ,page: true
            ,limit:12
            ,toolbar: '#toolbar2' 
            ,cols: [
                [ 
                {type: 'checkbox'}
                ,{type: 'numbers'}
                ,{field: 'id', title: 'ID',hide: true}
                ,{field: 'name', title: '用户名称',width:140}
                ,{field: 'nodeOrgName', title: '所属部门',width:160}
            ]
            ]
            ,done:function(){
             }
        });
        table.on("row(main-table)",function(obj){
        	clickLayTableRow(table,form,'main-table',obj);
        	selectMain();
        })
        table.on("row(sub-table)",function(obj){
        	clickLayTableRow(table,form,'sub-table',obj);
        })
        window.selectMain = function(){
        	let checkStatus = table.checkStatus('main-table');
   	      	checkData = checkStatus.data; 
        	table.reload('sub-table',{where:{roleCode: checkData[0].code}});
        }
        window.loadGrid = function(id){
        	table.reload('main-table');
        	setTimeout(function(){
   			  selectedRows(id,table,form,'main-table','main-table');
     		},2)
        }
        window.loadUser = function(){
        	table.reload('sub-table');
        }
        table.on('toolbar(main-table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id); 
            var width = 1000;
            if(top.width>1024){
            	width = 1300;
            }
            switch(obj.event){
                case 'add':
                	layer.open({
                		type: 2,
                		title:'增加角色',
                		area:['500px','500px'],
                		content: 'rooter?url=system/role/add-role',
                		btn:['保存','关闭'],
                		yes:function(index,layero){
                			var dataForm = layer.getChildFrame('form', index);
                			dataForm.find("#submitBtn").click();
                			return false
                		}
                	})    
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    if(data.length>0){
                        
                        if(data.length === 0){
                          return layer.msg('请选择要删除的记录');
                        }
                        var ids = [];
	                  	for(let i=0;i<data.length;i++){
	                  		ids[i] = data[i].id;
	                  	}
                        layer.confirm('确定删除吗？', function(index) {
                      	  $.ajax({
                      		  url:"role/delete",
                      		  type:'POST',
                      		  dataType:'json',
                      		  data:{ids: ids},
                      		  success:function(ret){
                      			  table.reload('main-table');
                      	          layer.msg('删除成功');
                      		  }
                      	  })
                            
                          })
                    }else{
                        layer.alert('请选择操作记录',{
                            icon: 2,
                            skin: 'layer-ext-moon'
                        })
                    }
                    break;
                case 'update':
                	var data = checkStatus.data;
                    if(data.length>0){
                        var values = {};
                        var ids='';
                        $.each(data,function(i,v){
                            ids+=v.id+",";
                        })
                        values['ids'] = ids;
                        layer.confirm('确定删除吗？', {icon: 3, title: '提示信息'}, function(index){
                            axios.post('eqInventory/ok',values).then(res=> {
                                if (res.data.code == 1) {
                                    layer.msg(res.msg);
                                } else {
                                    layer.close(index);
                                    table.reload('main-table');
                                }
                            })
                        });
                    }else{
                        layer.msg('请选择操作记录')
                    }
                	break;
            };
        });
        table.on('toolbar(sub-table)', function(obj){
            switch(obj.event){
                case 'assign':
                	var checkStatus = table.checkStatus('main-table');
           	      	checkData = checkStatus.data; 
           	      	if(checkData.length!=1){
           	      		return layer.msg("请选择角色");
           	      	}
           	      	var roleCode = checkData[0].code;
           	      	var userIds = [];
           	      	$.ajax({
           	      		url:"user/getList",
           	      		type:'get',
           	      		dataType:'json',
           	      		async:false,
           	      		data:{roleCode: roleCode},
           	      		success:function(res){
           	      			var data = res.data;
           	      			for(var i=0;i<data.length;i++){
           	      				userIds.push(data[i].id);
           	      			}
           	      		}
           	      	})
                	top.layer.open({
                		type: 2,
                		id:'assignwin1',
                		title: '分配用户',
                		area:['1200px',(top.height)+'px'],
                		content: 'rooter?url=system/role/user-select&userIds='+userIds.join(",")+"&roleCode="+roleCode,
                		btn:['分配','关闭'],
                        yes:function(index,layero){
                        	var iframeWin = top[layero.find('iframe')[0]['name']];
                            userIds = iframeWin.userIds;
                            if(userIds.length>0){
                            	axios.post("user/assignPost",{userId: userIds.join(","),roleCode: roleCode}).then(function(){
                      			  table.reload("sub-table");
                      			  
                      		  })
                            }
                            top.layer.close(index);
                            return false
                        }
                	})
                break;
                case 'remove':
                	var checkStatus = table.checkStatus('main-table');
           	      	checkData = checkStatus.data; 
                	var checkStatus2 = table.checkStatus('sub-table');
           	      	checkData2 = checkStatus2.data; 
           	      	if(checkData2.length==0){
           	      		return layer.msg("请选择人员记录");
           	      	}
           	      	let ids = [];
           	      	for(var i=0;i<checkData2.length;i++){
           	      		ids[i] = checkData2[i].id;
           	      	}
           	      	layer.confirm("确定删除吗",function(index){
	           	      	axios.post("user/deleteRole",{userId:ids.join(","),roleCode: checkData[0].code}).then(res=>{
	           	      		table.reload("sub-table") 
		       			    layer.close(index);
	           	      	})
           	      	})
           	     	
                 break;
            };
        });
		var $ = layui.$, active = {
		     query: function(){
		          var whr = {code: $("#code").val(),name:$("#name").val()};
		          table.reload('main-table',{where: whr});
		    },
		     resetPric: function () {
		               
		    }
		};
		$('.layui-form .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		});
    });
   
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
		<div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add">增加</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
		</div>
    </div>
</script>
<script type="text/html" id="toolbar2">
    <div class="layui-btn-container">
		<div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="assign">分配人员</button>
        <button class="layui-btn layui-btn-sm" lay-event="remove">删除</button>
		</div>
    </div>
</script>
</body>
</html>